import React, { Component } from 'react'
import './index.css'
import avatar from './images/avatar.png'

export default class App extends Component {
	state = {
		// hot: 热度排序  time: 时间排序
		tabs: [
			{
				id: 1,
				name: '热度',
				type: 'hot'
			},
			{
				id: 2,
				name: '时间',
				type: 'time'
			}
		],
		active: 'time',
		list: [
			{
				id: 1,
				author: '刘德华',
				comment: '给我一杯忘情水',
				time: '2021-10-10 09:09:00',
				img: 'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
				// 1: 点赞 0：无态度 -1:踩
				attitude: 1
			},
			{
				id: 2,
				author: '周杰伦',
				comment: '听妈妈的话',
				time: '2021-10-11 09:09:00',
				img: 'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
				// 1: 点赞 0：无态度 -1:踩
				attitude: 0
			},
			{
				id: 3,
				author: '陈奕迅',
				comment: '十年',
				time: '2021-10-11 10:09:00',
				img: 'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
				// 1: 点赞 0：无态度 -1:踩
				attitude: -1
			}
		]
	}
	handleCLick = (active) => {
		return () => {
			this.setState((state, props) => {
				return {
					active
				}
			})
		}
	}
	handleDel = (id) => {
		return () => {
			this.setState((state, props) => {
				return {
					list: this.state.list.filter((item) => item.id !== id)
				}
			})
		}
	}
	elefn() {
		const { list } = this.state
		return list.length === 0 ? (
			<h1 style={{ textAlign: 'center' }}>暂无评论</h1>
		) : (
			list.map((item) => (
				<div className="list-item" key={item.id}>
					<div className="user-face">
						<img className="user-head" src={item.img} alt="" />
					</div>
					<div className="comment">
						<div className="user">{item.author}</div>
						<p className="text">{item.comment}</p>
						<div className="info">
							<span className="time">{item.time}</span>
							<span className={item.attitude === 1 ? 'like liked' : 'like'}>
								<i className="icon" />
							</span>
							<span className={item.attitude === -1 ? 'hate hated' : 'hate'}>
								<i className="icon" />
							</span>
							<span className="reply btn-hover" onClick={this.handleDel(item.id)}>
								删除
							</span>
						</div>
					</div>
				</div>
			))
		)
	}
	render() {
		const { active, list, tabs } = this.state
		return (
			<div>
				<div className="App">
					<div className="comment-container">
						<div className="comment-head">
							<span>{list.length} 评论</span>
						</div>
						<div className="tabs-order">
							<ul className="sort-container">
								{tabs.map((item) => (
									<li
										className={item.type === active ? 'on' : ''}
										key={item.id}
										onClick={this.handleCLick(item.type)}
									>
										按{item.name}排序
									</li>
								))}
							</ul>
						</div>
						<div className="comment-send">
							<div className="user-face">
								<img className="user-head" src={avatar} alt="" />
							</div>
							<div className="textarea-container">
								<textarea cols="80" rows="5" placeholder="发条友善的评论" className="ipt-txt" />
								<button className="comment-submit">发表评论</button>
							</div>
							<div className="comment-emoji">
								<i className="face" />
								<span className="text">表情</span>
							</div>
						</div>
						<div className="comment-list">{this.elefn()}</div>
					</div>
				</div>
			</div>
		)
	}
}
